<template>
  <div class="content">
    <!-- <menu-c></menu-c> -->
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-time-select
      placeholder="起始时间"
      v-model="startTime"
      :picker-options="{
        start: '00:00',
        step: '01:00',
        end: '24:00'
      }"
    >
    </el-time-select>
    <el-time-select
      placeholder="起始时间"
      v-model="endTime"
      :picker-options="{
        start: '00:00',
        step: '01:00',
        end: '24:00'
      }"
    >
    </el-time-select>
  </div>
</template>
<script>
import menuC from './menu.vue';
export default {
  data() {
    return {
      params: {},
      text: '',
      result: '',
      value1: [
        new Date(new Date().toLocaleDateString()).getTime() - 24 * 3600 * 1000,
        new Date(new Date().toLocaleDateString()).getTime() - 24 * 3600 * 1000
      ],
      list: [],
      startTime: '00:00',
      endTime: '24:00',
      params: '',
      timeSub: 1
    };
  },
  components: {
    menuC
  },
  watch: {
    startTime(value) {
      if (!value) {
        console.log(1);
        return;
      }
      this.handleTimeSub();
    },
    endTime(value) {
      if (!value) {
        console.log(2);
        return;
      }
      this.handleTimeSub();
    },
    value1(value) {
      if (!value) {
        return;
      }
      let startTime = +new Date(value[0]);
      let endTime = +new Date(value[1]);
      // 如果0 1相同 说明选择的是同一天
      if (startTime === endTime) {
        this.timeSub = 1;
      } else {
        // 不同 选择的大于一天
        this.timeSub = (endTime - startTime) / this.oneDay + 1;
      }
      this.handleTimeSub();
    }
  },
  mounted() {},

  computed: {
    oneDay() {
      return 24 * 3600 * 1000;
    }
  },
  methods: {
    // 处理时间段
    handleTimeSub() {
      if (!this.startTime || !this.endTime || !this.value1) {
        console.log('没选时间');
        return;
      }
      let startTime = parseInt(this.startTime);
      let endTime = parseInt(this.endTime);
      let startDateTime = +new Date(this.value1[0]);
      let timeSubArr = [];
      endTime == 24 ? (endTime = endTime - 0.00001) : '';
      for (let i = 0; i < this.timeSub; i++) {
        let time = startDateTime + this.oneDay * i;
        timeSubArr.push({
          startTime: time + startTime * 3600000,
          endTime: time + endTime * 3600000
        });
      }
      // 将数组拼接为字符串
      this.parmas = this.formateTimeArr(timeSubArr);
    },
    // 处理筛选后的时间参数
    formateTimeArr(timeSubArr) {
      // 将参数拼接为(time>=开始时间 and time<=结束时间) or (time>=开始时间 and time<=结束时间)
      let arr = [];

      timeSubArr.map(val => {
        let str = '';
        str = `(time<=${val.endTime} and time>=${val.startTime})`;
        arr.push(str);
      });
      arr = `(${arr.join(' or ')})`;
      return arr;
    },
    // 获取到浏览器顶部的距离
    getTop(e) {
      return e.offsetTop;
    },
    // 懒加载实现
    lazyload(imgs) {
      // 可视区域高度
      var h = window.innerHeight;
      //滚动区域高度
      var s = document.documentElement.scrollTop || document.body.scrollTop;
      for (var i = 0; i < imgs.length; i++) {
        //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
        if (h + s > this.getTop(imgs[i])) {
          // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
          (function(i) {
            setTimeout(function() {
              // 不加立即执行函数i会等于9
              // 隐形加载图片或其他资源，
              //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
              var temp = new Image();
              temp.src = imgs[i].getAttribute('data-src'); //只会请求一次
              // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
              temp.onload = function() {
                // 获取自定义属性data-src，用真图片替换假图片
                imgs[i].src = imgs[i].getAttribute('data-src');
              };
            }, 500);
          })(i);
        }
      }
    }
  }
};
</script>
